<template>
  <div class="m-2">
    <a-layout has-sider>
      <!-- 右侧链接表格 -->
      <a-layout>
        <a-layout-content :style="{ margin: '2px 16px 0', overflow: 'initial' }">
          <a-button
            style="margin: 0.2rem; float: right"
            type="success"
            :icon="h(PlusOutlined)"
            @click="handleAdd"
          >
            新增
          </a-button>
          <a-table
            bordered
            :columns="columns"
            :data-source="data.treeData"
            :pagination="pagination"
          >
            <!-- ant3版本以后要用这种bodycell的方式去设置按钮，不然会有个warning警告， 显示内容会默认显示不用写text -->
            <template #bodyCell="{ text, record, column }">
              <a-tag
                v-if="column.dataIndex === 'flag'"
                :color="text == 0 ? '#108ee9' : text == 5 ? 'default' : '#f50'"
              >
                {{ text == 0 ? '正常' : text == 5 ? '禁用' : '已删除' }}
              </a-tag>
              <!-- 操作按钮 -->
              <template v-if="column.dataIndex === 'operation'">
                <a-space>
                  <a-popconfirm
                    title="确认删除，一经确认不可撤回 ?"
                    ok-text="是"
                    cancel-text="否"
                    @confirm="onDelete(record)"
                  >
                    <a-button danger preIcon="ant-design:delete" type="link">删除</a-button>
                  </a-popconfirm>
                  <a-button preIcon="ant-design:edit" type="link" @click="onEdit(record)">
                    修改
                  </a-button>
                </a-space>
              </template>
            </template>
          </a-table>
        </a-layout-content>
      </a-layout>
    </a-layout>

    <!-- 链接分类弹窗--用于新增或修改 -->
    <LinkCategoryModal ref="linksRef" />
  </div>
</template>

<script setup lang="ts">
  import { reactive, h, ref, provide } from 'vue';
  import { queryLinkCategory, deleteLinkCategory } from '/@/api/cms/linkcategory';
  import { PlusOutlined } from '@ant-design/icons-vue';
  import { message } from 'ant-design-vue';
  import LinkCategoryModal from './LinkCategoryModal.vue';
  import pagination from '/@/hooks/component/pagination';

  // 表格数据
  const data: any = reactive({
    tableData: [{ flag: 98, id: 38, name: '务周没维天为', odr: 57 }],
  });

  // 表格的columns属性
  const columns = [
    {
      title: '链接分类名称',
      dataIndex: 'name',
      key: 'name',
      align: 'center',
    },
    {
      title: 'ID',
      dataIndex: 'id',
      key: 'id',
      align: 'center',
    },
    {
      title: '标记',
      dataIndex: 'flag',
      key: 'flag',
      align: 'center',
    },
    {
      title: '操作',
      dataIndex: 'operation',
      align: 'center',
    },
  ];

  const linksRef = ref<any>();

  // 获取链接分类列表
  GetQueryCategoryLinks();
  function GetQueryCategoryLinks() {
    queryLinkCategory().then((res) => {
      data.treeData = res;
      pagination.total = res.length;
    });
  }

  // 删除
  const onDelete = (record) => {
    deleteLinkCategory({ id: record.id })
      .then((res) => {
        message.success('删除成功');
        GetQueryCategoryLinks();
      })
      .catch((e) => {
        message.error(e);
      });
  };

  // 修改
  const onEdit = (record) => {
    linksRef.value.editInit(record);
  };

  // 新增
  const handleAdd = () => {
    linksRef.value.showModal('add');
  };

  provide('getQueryLinks', GetQueryCategoryLinks);
</script>

<style lang="scss" scoped></style>
